<template>
  <div class="home-util-bar">
    <ul class="list">
      <li class="item"
          v-for="(util, idx) of utils"
          :style="{'background-image': 'url(' + util.icon + ')'}"
          :key="idx"
          @click="clickHandler(util.handler)"></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'home-util-bar',

  data () {
    return {
      utils: [
        {
          icon: require('../../../assets/images/btn_servise.png'),
          handler: 'on-customer-service'
        },
        {
          icon: require('../../../assets/images/btn_code.png'),
          handler: 'on-code'
        },
        {
          icon: require('../../../assets/images/btn_tutorial.png'),
          handler: 'on-tutorial'
        }
      ]
    };
  },

  methods: {
    clickHandler (handlerName) {
      this.$emit(handlerName);
    }
  }
};
</script>

<style lang="scss" scoped>
.home-util-bar {
  position: absolute;
  top: 342px;
  right: 0;
  width: 140px;
  height: 405px;

  .list {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
    height: 100%;

    .item {
      width: 100%;
      flex: 0 0 102px;
      background-repeat: no-repeat;
      background-position: top left;
      background-size: 100% 100%;
    }
  }
}
</style>
